<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dinner</title> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_json.js"></script>
<script type="text/javascript" src="js/collection.js"></script>
<script type="text/javascript" src="js/delivery.js"></script>
<script type="text/javascript" src="js/delivery_biz.js"></script>
</head>
<script>
var globalHandler = new GlobalHandler();
initHandler(globalHandler);
var connection = new Connection("localhost","8001",globalHandler);

function getCompany() {
	var request = new GetCompanyMessage();
	connection.send(request);
}

function onCompanyReady(companyId) {
	var request = new GetProjectsMessage(companyId);
	connection.send(request);
}

function onProjectSelected(projectId) {
	var request = new GetEmployeesMessage(projectId);
	connection.send(request);
}

function getDeliveries() {
	var request = new GetDeliveriesMessage();
	connection.send(request);
}

function onDeliverySelected(deliveryId) {
	var request = new GetDishesMessage(deliveryId);
	connection.send(request);
}

function addProject() {
	var name = $("#projectName").val();
	var intro = $("#projectIntro").val();
	var request = new AddProjectMessage(name.trim(),intro.trim());
	connection.send(request);
}
</script>
<body>
	<input type="button" value="expand" id="expand_but" onclick="getCompany();getDeliveries();"/>
	
	<div>
	<h1></h1>
	<center><span id="company_title"></span></center>
	</div>
	
	<div>
		<ul id="projects">
			
		</ul>
	</div>
	
	<div>
		<table>
			<thead id="employeesHeader" style="display:none">
				<tr><td>Fellows</td></tr>
			</thead>
				
			<tbody id="employees">
				
			</tbody>
		</table>
	</div>
	
	<div>
		<ul id="deliveries">
		
		</ul>
	</div>
	
	<div>
		<table>
			<thead id="dishesHeader" style="display:none">
				<tr><td>Dish</td><td>Price</td></tr>
			</thead>
			
			<tbody id="dishes">
				
			</tbody>
		</table>
	</div>
	
	<div>
		<label for="projectName">Project Name</label>
		<input type="text" id="projectName"/><br/>
		<label for="projectIntro">Project Introduction</label><br/>
		<textarea rows="10" cols="20" id="projectIntro"></textarea><br/>
		<input type="button" id="addproject_but" value="AddProject" onclick="addProject()"/>
	</div>
</body>
</html>